<template>
  <div class="JADP-common-layout">
    <div class="JADP-common-layout-center">
      <el-row class="JADP-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="培训类别" prop="train_type">
              <el-select
                v-model="query.train_type"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in getDict('pxlb')"
                  :key="index"
                  :label="item.dataName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="培训行业">
              <el-select
                v-model="query.categorytype"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in getDict('hangye')"
                  :key="index"
                  :label="item.dataName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班级名称">
              <el-input
                v-model="classname"
                placeholder="请输入"
                readonly
                @click.native.stop="choiceClazz"
                v-popover:popover
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click.native.stop="choiceClazz"
                  >查询</el-button
                >
              </el-input>
              <el-popover
                ref="popover"
                placement="top-start"
                width="250"
                trigger="hover"
                :content="classname"
              >
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="initData"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div class="JADP-common-layout-main JADP-flex-main">
        <JADP-table :data="list" height="400px">
          <el-table-column label="培训班" prop="classname"> </el-table-column>
          <el-table-column label="培训类型" prop="train_type">
            <template v-slot="{ row }">
              {{ getDict("pxlb", row.train_type) }}
            </template>
          </el-table-column>
          <el-table-column label="培训行业" prop="categorytype">
            <template v-slot="{ row }">
              {{ getDict("hangye", row.categorytype) }}
            </template>
          </el-table-column>
          <el-table-column label="培训时间">
            <template v-slot="{ row }">
              {{ row.traindate_start }} ~ {{ row.traindate_end }}
            </template>
          </el-table-column>
          <el-table-column label="学员数量" prop="xysl"></el-table-column>
          <el-table-column label="订单数量" prop="ddsl"></el-table-column>
          <el-table-column label="订单总额" prop="ddje"></el-table-column>
        </JADP-table>
        <Order ref="order" />
      </div>
    </div>
    <ClazzTable
      ref="clazzTable"
      multiple
      @multipleSelection="multipleSelection"
    />
  </div>
</template>
<script>
import ClazzTable from "../components/clazzTable.vue";
import Order from "./order.vue";
import request from "@/utils/request";
export default {
  name: "OrderStatistics",
  components: {
    ClazzTable,
    Order
  },
  data() {
    return {
      query: {
        train_type: "",
        categorytype: "",
        clazzid: "",
        organizeId:""

      },
      classname: "",
      list: []
    };
  },
  methods: {
    choiceClazz() {
      this.$refs.clazzTable.parameterInit(
        this.query.categorytype,
        this.query.train_type
      );
    },
    multipleSelection(val) {
      this.classname = val.map(item => item.classname).join();
      this.query.clazzid = val.map(item => item.id).join();
    },
    initData() {
      this.query.organizeId=this.$store.getters.organizeId

      request({
        url: "/api/statistics/StatisticsController/orderStatistics",
        method: "get",
        data: this.query
      }).then(res => {
        this.list = res.data;
        this.$refs.order.initChart(this.list);
      });
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.classname = undefined;
      this.list = [];
      this.$refs.order.initChart(this.list);
    }
  }
};
</script>
<style scoped lang="scss"></style>
